<template>
    <List class="table_desc1" header="公司列表"/>
    <div class="header_title1">
        <Button type="primary" ghost @click="add">
        <Icon type="md-add" />添加公司
        </Button>
        <Button type="default" @click="refresh">
            <Icon type="md-refresh" />刷新
        </Button>
    </div>
    
    <Table :columns="columns" :data="companylist">
        <template #name="{ row }">
            <router-link :to="{ path: '/company/detail', query: { id: row.id } }">{{ row.name }}</router-link>
        </template>
        <template #action="{ row }">
            <Button type="text" size="small" @click="edit(row.id)"><span style="color: blue">编辑</span></Button>
            <Button type="text" size="small" @click="_delete(row)"><span
                    style="color: red">删除</span></Button>
        </template>
    </Table>
    <Page v-model="page.pageIndex" :total="page.totalCount" :page-size="page.pageSize" @on-change="page_change" show-elevator show-total />
    <Modal v-model="show_company_modal" title="添加公司" @on-visible-change="visibleChange">
        <Form ref="refAddCompany" :model="form" :rules="validateRules">
            <Row :gutter="32">
                <Col :span="12">
                <FormItem label="公司名称" prop="name" label-width=80>
                    <Input type="text" v-model="form.name"></Input>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="公司电话" prop="phone_no" label-width=80>
                    <Input type="text" v-model="form.phone_no"></Input>
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="32">
                <Col :span="12">
                <FormItem label="公司编码" prop="postal_code" label-width=80>
                    <Input type="text" v-model="form.postal_code"></Input>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="公司地址" prop="address" label-width=80>
                    <Input type="text" v-model="form.address"></Input>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="11">
                <FormItem label="跟进人" prop="followup_employee_code" label-width=80> 
                    <Input type="text" v-model="form.followup_employee_code"></Input>
                </FormItem>
                </Col>
            </Row>
        </Form>
        <template #footer>
            <Button type="default" @click="cancel">关闭</Button>
            <Button type="primary" @click="submit">提交</Button>
        </template>
    </Modal>
</template>
<script>
import axios from 'axios'


export default {
    setup() {

    },
    methods: {
        page_change: function() {
            this.fetch_data()
        },
        fetch_data: function () {
            axios.get("http://localhost:3000/api/company/page_query?page=" + this.page.pageIndex + "&per_page=" + this.page.pageSize)
                .then(resp => {
                    if (resp && resp.data && resp.data.data && resp.data.data.length > 0) {
                        this.companylist = resp.data.data
                        this.page = {
                            pageIndex: resp.data.page,
                            pageSize: resp.data.per_page,
                            pageTotal: resp.data.total_page,
                            totalCount: resp.data.total_count
                        }
                    }
                }).catch(function (error) {
                    console.log(error)
                })
        },
        refresh: function (showmessage = true) {
            if (showmessage) this.$Message.success('刷新成功')
            this.fetch_data()
        },
        add: function () {
            this.show_company_modal = true
        },
        cancel: function () {
            this.show_company_modal = false
        },
        submit: function () {
            this.$refs['refAddCompany'].validate(valid => {
                if (valid) {
                    if (this.actionflag == 'add') {
                        axios
                        .post("http://localhost:3000/api/company/add_company",
                            this.form,
                            {
                                'Content-Type': 'application/json; charset=utf-8'
                            }
                        ).then(resp => {
                            if (resp.data && resp.data) {
                                this.$Message.success('添加成功')
                                this.show_company_modal = false
                                this.refresh(false)

                            } else {
                                this.$Message.error('添加失败')
                            }
                        }).catch(error => {
                            this.$Message.error(error.response.data.error)
                        })
                    } else if (this.actionflag == 'edit'){
                        axios
                        .post("http://localhost:3000/api/company/update",
                            this.form,
                            {
                                'Content-Type': 'application/json; charset=utf-8'
                            }
                        ).then(resp => {
                            if (resp.data && resp.data) {
                                this.$Message.success('更新成功')
                                this.show_company_modal = false
                                this.refresh(false)

                            } else {
                                this.$Message.error('更新失败')
                            }
                        }).catch(error => {
                            this.$Message.error(error.response.data.error)
                        })
                    }
                    

                } else {
                    // 如果验证不通过执行的一些操作
                    this.$Message.error('验证失败!');
                }
            })
        },
        edit: function (id) {
            this.actionflag = 'edit'
            axios.get("http://localhost:3000/api/company/query_by_id?id=" + id)
                .then(resp => {
                    if (resp.data) {
                        this.form = resp.data;
                        this.form.creator_id = this.form.creator_id || '202307001'
                        this.show_company_modal = true
                    }
                })
                .catch(error => {
                    this.$Message.error(error.response.data.error)
                })
        },
        _delete: function (row) {
            if (confirm("确认要删除公司: "+row.name+" 吗？")) {
                axios.post("http://localhost:3000/api/company/delete",
                    {
                        id: row.id
                    },
                    {
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                ).then(resp => {
                    if (resp.data && resp.data > 0) {
                        this.$Message.success('删除成功')
                    }
                }).catch(error => {
                    this.$Message.error(error.response.data.error)
                }).finally(() => {
                    this.refresh(false)
                })
            }
        },
        visibleChange: function (value) {
            if (!value) this.$refs['refAddCompany'].resetFields();
        }
    },
    data() {
        return {
            show_company_modal: false,
            actionflag: 'add',
            form: {
                name: null,
                gender: null,
                dept_name: null,
                important_level: null,
                tel_no: null,
                phone_no: null,
                email: null,
                note: null
            },
            validateRules: {
                name: [{
                    required: true,
                    message: "公司名称不能为空",
                    trigger: 'blur'
                }, {
                    max: 20,
                    message: "长度最长20",
                    trigger: 'change'
                }]
            },
            columns: [
                {
                    title: '公司名称',
                    slot: 'name'
                },
                {
                    title: '跟进人',
                    key: 'followup_employee'
                },
                {
                    title: '公司电话',
                    key: 'phone_no'
                },
                {
                    title: '公司邮编',
                    key: 'postal_code'
                },
                {
                    title: '公司地址',
                    key: 'address'
                },
                {
                    title: '操作',
                    slot: 'action'
                }
            ],
            companylist: [],
            page: {
                pageIndex: 1,
                pageSize: 10,
                pageTotal: 0,
                totalCount: 0
            }
        }
    },
    mounted() {

    },
    created() {
        this.fetch_data()
    },
}
</script>

